<template>
	<div class="container-wrap pbm">
		<div class="content-box">
			<div class="top-box flex-wrap flex-text-mid space-around">
				<div class="title-item">
					<p class="num">{{countObj.pubCount}}</p>
					<p class="desc">我发布的</p>
				</div>
				<div class="title-item">
					<p class="num">{{countObj.replyCount}}</p>
					<p class="desc">我回复的</p>
				</div>
				<div class="title-item">
					<p class="num">{{countObj.collectCount}}</p>
					<p class="desc">我收藏的</p>
				</div>
			</div>
			<div class="tabs-box">
				<van-tabs v-model="activeStatus" @click="switchMenu">
					<van-tab title="我的发布"></van-tab>
					<van-tab title="回复"></van-tab>
					<van-tab title="收藏"></van-tab>
					<van-tab title="草稿"></van-tab>
				</van-tabs>
				<div class="list-box">
					<van-list v-if="activeStatus===0" v-model="listLoading" :finished="listFinished"
						:finished-text="list.length > 0 ? '没有更多了' : ''" @load="loadMore">
						<ListItem :postAudit="true" v-if="list.length>0" :list="list" vertical canAction></ListItem>
						<div v-else class="fs-14 fc-999 mt40 text-center">你还没有发布过话题 </div>
					</van-list>
					<div v-if="activeStatus===1">
						<div class="fs-14 fc-999 mt40 text-center">暂无数据 </div>
					</div>
					<div v-if="activeStatus===2">
						<div class="fs-14 fc-999 mt40 text-center">暂无数据 </div>
					</div>
					<div v-if="activeStatus===3">
						<div class="fs-14 fc-999 mt40 text-center">暂无数据 </div>
					</div>
					<div>
						<template v-if="isShowPub">
							<div v-if="list.length" class="right-icon" @click="addForum">
								<i class="icon iconfont icon-wodefabu"></i>
							</div>
							<div class="bottom-icon" v-else @click="addForum">
								<i class="icon iconfont icon-wodefabu"></i>
								<span>发布话题</span>
							</div>
						</template>

					</div>
				</div>

			</div>
		</div>

	</div>
</template>

<script>
	import ListItem from '@/components/forum/listItem.vue'
	import ReplayList from '@/components/forum/replayList.vue'
	import {
		parse,
		stringify
	} from "@/assets/js/util";
	import vanTab from "@/components/vant/van-tab/van-tab.vue"
	import vanTabs from "@/components/vant/van-tabs/van-tabs"
	import vanList from "@/components/vant/van-list/van-list.vue"
	import mockData from "@/mock/forum/myForum.json"
	export default {
		name: "MyForumList",

		components: {
			ListItem,
			ReplayList,
			vanTab,
			vanTabs,
			vanList
		},
		data() {
			return {
				title: '我的话题',
				activeStatus: 0,
				currIndex: 0,
				list: [],
				listSearch: {},
				page: {
					pageNumber: 1,
					pageSize: 10
				},
				pageTotalCount: 0,
				listLoading: false,
				listFinished: false,
				countObj: {},
				isShowPub: false,
				backPath: '',
				backQuery: {},
				isBackIndex: false, // 如果在本页面刷新了，返回首页
			}
		},
		computed: {

		},
		watch: {
			activeStatus(val) {
				if (val !== 4) this.getList(true)
			}
		},
		mounted() {
			this.initPage();
			this.getList(true)
		},
		methods: {
			onClickLeft() {
				uni.navigateBack({
					delta: 1
				})
			},
			initPage() {
				this.getMyStatistics()
			},
			getMyStatistics() {
				this.countObj = {
					"pubCount": 1,
					"collectCount": 0,
					"replyCount": 0
				}
			},
			getList(loadNew) {
				switch (this.currIndex) {
					case 0:
						this.list = mockData.data.list;
						this.listFinished = true
						break;
					case 1:
						this.list = [];
						break;
					case 2:
						this.list = [];
						break;
					case 3:
						this.list = [];
						break;
				}
				
			},
			loadMore() {
				if (!this.listFinished) this.getList()
			},
			addForum() {
				this.$uniPush({
					name: 'forum-add'
				})
			},
			switchMenu(name, title) {
				this.page = {
					pageNumber: 1,
					pageSize: 10
				}
				if (name === 1) {
					this.currIndex = 2
				} else if (name === 2) {
					this.currIndex = 3
				} else if (name === 3) {
					this.currIndex = 1
				} else {
					this.currIndex = name
				}
			},
		},
		onReachBottom() {
			this.loadMore()
		}
	}
</script>

<style scoped lang="scss">
	.container-wrap {
		position: relative;
		height: 100vh;
		background: #fff;

		.top-wrap {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 100;
			background: #fff;
		}

		.content-box {
			padding: 10px 0 15px;
			background-color: #fff;

			.top-box {
				padding: 20px 15px;

				.title-item {
					text-align: center;
					position: relative;
					width: 30%;

					.num {
						font-size: 26px;
						font-weight: 600;
						color: #333333;
						line-height: 37px;
					}

					.desc {
						font-size: 12px;
						font-weight: 400;
						margin-top: 5px;
						color: #333333;
						line-height: 17px;
					}

					&::after {
						position: absolute;
						content: '';
						width: 1px;
						height: 24px;
						border: 1px solid #EEEEEE;
						right: 0;
						top: 10px;
					}

					&:last-child::after {
						content: '';
						width: 0;
						height: 0;
						border: none;
					}
				}
			}
		}

		.tabs-box {
			//padding: 0 15px;
			background: #FFFFFF;

			:deep(.van-tabs .van-tabs__wrap) {
				border: none;
			}

			:deep(.van-tabs--line .van-tabs__wrap) {
				box-shadow: 0 8px 30px 0 rgba(226, 233, 232, 0.47);
			}


		}

		.list-box {
			padding: 0 15px;
		}

		.right-icon,
		.bottom-icon {
			position: fixed;
			bottom: 20px;
			right: 20px;
			width: 52px;
			height: 52px;
			background: var(--color);
			border-radius: 50%;
			text-align: center;
			line-height: 46px;

			i {
				font-size: 26px;
				color: #fff;
			}
		}

		.bottom-icon {
			bottom: 20px;
			left: 50%;
			transform: translate(-50%, 0);
			width: 120px;
			height: 40px;
			background: var(--color);
			border-radius: 20px;
			line-height: 30px;
			display: flex;
			align-items: center;
			justify-content: center;

			span {
				font-size: 14px;
				font-weight: 600;
				color: #FFFFFF;
				margin-left: 4px;
			}

			i {
				font-size: 22px;
				color: #fff;
			}
		}
	}
</style>